<template>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100">
    <div class="p-6 h-full grid grid-cols-4 divide-x-4 divide-slate-400/25">
      <div class="my-card-container-grid ">
        <div
          class="col-span-2 leading-none border-b-2 border-b-violet-700 text-3xl flex flex-row items-center font-black text-blue-500">
          <el-icon class="mr-2">
            <platform/>
          </el-icon>
          {{ $t('mes.finishedLocation') }}
          <div class="box">
            <span>{{$t('wms.inStorage')}}：{{data.instockQty}}</span>
            <span style="font-size: 14px">/{{ $t('wms.ark') }}</span>
          </div>
        </div>
        <template v-for="(item,index) of getList1" :key="index">
          <location-card :data="getList1[index%2 === 0 ? (index+1):(index -1)]"></location-card>
        </template>
      </div>
      <div class="my-card-container-grid  my-card-container-bg">
        <template v-for="(item,index) of getList2" :key="index">
          <location-card :data="getList2[index%2 === 0 ? (index+1):(index -1)]"></location-card>
        </template>
      </div>
      <div class="my-card-container-grid ">
        <template v-for="(item,index) of getList3" :key="index">
          <location-card :data="getList3[index%2 === 0 ? (index+1):(index -1)]"></location-card>
        </template>
      </div>
      <div class="my-card-container-grid  my-card-container-bg">
        <template v-for="(item,index) of getList4" :key="index">
          <location-card :data="getList4[index%2 === 0 ? (index+1):(index -1)]"></location-card>
        </template>
      </div>
    </div>
  </ScaleBox>
</template>
<script setup>
import { onMounted, reactive } from 'vue'
import { getList1, getList2, getList3, getList4, loadData } from '@/views/wms/warehouseLocation/data'
import ScaleBox from 'vue3-scale-box'
import LocationCard from '@/components/wms/location/locationCard.vue'
import useI18n from '@/hooks/language'
import '@/style/tailwind.css'
import { getInstockQty } from '@/api/mesApi'
// import 'animate.css'

const { t } = useI18n()

const data = reactive({
  instockQty: 0
})
// 默认有90个格子
onMounted(() => {
  loadData()
  setInterval(loadData, 1000 * 5)
  instockQty()
})

// 查询总柜数
const instockQty = () => {
  getInstockQty().then(res => {
    data.instockQty = res.toFixed(2)
  })
}
</script>
<style scoped lang="scss">
@forward "./index";
.my-card-container-grid {
  @apply grid grid-cols-2 h-full gap-3 p-2.5 rounded-lg
}

.my-card-container-bg {
  @apply bg-gradient-to-b from-gray-50 to-sky-50
}
</style>
